<!-- 控件层级 -->
<template>
    <div class="widget-hierarchy-wrap">
        <template v-if="['search', 'sort', 'citylocation', 'new-classify'].includes(widgetType)">
            <template v-if="!!bindWidget">
                <div class="list-wrap">
                    <div class="item-wrap" @click="handleSelectWidget(bindWidget.eles.id)">
                        <div>返回{{ bindWidget.component.title }}</div>
                        <el-icon><icon-arrow-down /></el-icon>
                    </div>
                </div>
                <div class="arrow-wrap"></div>
            </template>
        </template>
        <template v-else>
            <div class="header-wrap">层级</div>
            <el-scrollbar ref="scrollbarRef" max-height="300px" always>
                <div class="list-wrap">
                    <template v-for="(item, index) in hierarchys" :key="index">
                        <div class="item-wrap" @click="handleSelectWidget(item.value)">
                            <div>{{ item.label }}</div>
                            <el-icon><icon-arrow-down /></el-icon>
                        </div>
                    </template>
                </div>
            </el-scrollbar>
            <div class="arrow-wrap"></div>
        </template>
    </div>
</template>

<script>
import { defineComponent, toRefs, ref, computed, watch, onMounted, nextTick } from 'vue'
import { useEditStore } from '@/store'
import useWidget from '@/libs/edit/widgetData'
import usePhoneView from '@/libs/edit/phoneView'
export default defineComponent({
    name: 'WidgetHierarchy',
    props: {
        widgetId: {
            type: String,
            required: true
        }
    },
    setup(props) {
        const { widgetId } = toRefs(props)

        const editStore = useEditStore()

        const {
            widgetListFlat,
            onSelectWidget
        } = useWidget()

        const {
            setScrollTopId
        } = usePhoneView()

        const scrollbarRef = ref(null)

        const widgetList = computed(() => editStore.widgetList)

        const widget = computed(() => widgetListFlat.value[widgetId.value] || {})
        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)
        const hierarchys = computed(
            () => widget.value.hierarchy.map(id => {
                const data = widgetListFlat.value[id].widgetData
                return {
                    label: data.component.title,
                    value: data.eles.id
                }
            })
        )

        const bindStatus = computed(() => {
            let status = false
            if (widgetType.value === 'search') {
                status = !!widget.value?.widgetData?.eles?.customFeature?.searchObject?.customFeature?.id
            } else if (widgetType.value === 'sort') {
                status = !!widget.value?.widgetData?.eles?.customFeature?.['sort_object']
            } else if (widgetType.value === 'citylocation') {
                status = !!widget.value?.widgetData?.eles?.customFeature?.citylocation?.customFeature?.id
            } else if (widgetType.value === 'new-classify') {
                status = !!widget.value?.widgetData?.eles?.customFeature?.refreshObject
            }
            return status
        })

        const bindWidget = computed(() => {
            let data = null
            if (bindStatus.value) {
                if (widgetType.value === 'search') {
                    data = widgetList.value.find(item => {
                        return widget.value.widgetData.eles.customFeature.searchObject.customFeature.id === item.eles.customFeature.id
                    })
                } else if (widgetType.value === 'sort') {
                    data = widgetList.value.find(item => {
                        return widget.value.widgetData.eles.customFeature['sort_object'] === item.eles.customFeature.id
                    })
                } else if (widgetType.value === 'citylocation') {
                    data = widgetList.value.find(item => {
                        return widget.value.widgetData.eles.customFeature.citylocation.customFeature.id === item.eles.customFeature.id
                    })
                } else if (widgetType.value === 'new-classify') {
                    data = widgetList.value.find(item => {
                        return widget.value.widgetData.eles.customFeature.refreshObject === item.eles.customFeature.id
                    })
                }
            }
            return data
        })

        watch(
            () => widgetId.value,
            () => {
                nextTick(() => scrollbarRef.value && scrollbarRef.value.setScrollTop(scrollbarRef.value.wrapRef.scrollHeight))
            }
        )

        onMounted(() => {
            scrollbarRef.value && scrollbarRef.value.setScrollTop(scrollbarRef.value.wrapRef.scrollHeight)
        })

        const handleSelectWidget = id => {
            onSelectWidget([id])
            setScrollTopId(id)
        }

        return {
            widget,
            widgetType,
            hierarchys,
            bindStatus,
            bindWidget,

            scrollbarRef,

            handleSelectWidget
        }
    }
})
</script>

<style lang="less" scoped>
.widget-hierarchy-wrap {
    position: absolute;
    right: 335px;
    top: 25%;
    line-height: 18px;
    text-align: center;
    color: var(--edit-text-color-regular);
    z-index: 1;
    .header-wrap {
        width: 36px;
        padding: 6px 11px;
        background-color: var(--edit-bg-color);
        border: 1px solid var(--edit-border-color-light);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        box-sizing: border-box;
    }
    .arrow-wrap {
        width: 36px;
        height: 15px;
        position: absolute;
        left: 0;
        bottom: 0;
        box-sizing: border-box;
        z-index: -1;
        &::before {
            content: '';
            position: absolute;
            width: 26px;
            height: 26px;
            z-index: -1;
            transform: rotate(45deg);
            background-color: var(--edit-bg-color);
            box-sizing: border-box;
            border: 1px solid var(--edit-border-color-light);
            border-top-color: transparent !important;
            border-left-color: transparent !important;
            border-top-left-radius: 2px;
            left: 5px;
        }
    }
    .list-wrap {
        padding-right: 15px;
        .item-wrap {
            position: relative;
            width: 36px;
            background-color: var(--edit-bg-color);
            border-left: 1px solid var(--edit-border-color-light);
            border-right: 1px solid var(--edit-border-color-light);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: center;
            cursor: pointer;
            &:hover {
                color: var(--edit-color-primary);
            }
            &:first-child {
                padding-top: 7px;
            }
            &:last-child {
                padding-bottom: 7px;
                color: var(--edit-color-primary);
                border-bottom-left-radius: 1px;
                border-bottom-right-radius: 1px;
                .el-icon {
                    display: none;
                }
            }
            & > div {
                margin: 0 auto;
                padding: 0 11px;
                word-wrap: break-word; // 字母换行
                word-break: break-word; // 英文单词换行
                white-space: pre-wrap; // 中文换行
            }
            .el-icon {
                display: inline-block;
                color: var(--edit-color-info-light-7);
                line-height: 20px;
                font-size: 18px;
                cursor: default;
            }
        }
    }
}
</style>